{% if stats_calculated %}
  <style type="text/css">
    .table-container {
      margin: 20px 0;
    }
  </style>

  <script type="text/javascript" src="//www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load('visualization', '1', {packages: ['table']});
    google.setOnLoadCallback(drawAllTables);
    var answerCountsDict = JSON.parse("{{accumulated_question_answers | js_string}}");
    var answerCountsAssessmentDict = JSON.parse("{{accumulated_assessment_answers | js_string}}");

    function getSizeOfObject(obj) {
      var size = 0;
      for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
          size++;
        }
      }
      return size;
    }

    function getSortedKeys(obj) {
      var keys = [];
      for (var item in obj) {
        keys.push(item);
      }
      keys.sort();
      return keys;
    }

    function getMaxAnswerCount(answerCountsDict) {
      // Gets the maximum number of answer choices for a multiple-choice question.
      var maxAnswerCount = 0;
      for (var key in answerCountsDict) {
        var numChoices = getSizeOfObject(answerCountsDict[key]['answer_counts']);
        maxAnswerCount = Math.max(maxAnswerCount, numChoices);
      }
      return maxAnswerCount;
    }

    function getScoreLabel(score, attempts) {
      if (attempts === 0) {
        return 'No attempts recorded';
      } else {
        var roundedScore = Math.round(score / attempts * 100.0) / 100;
        var attemptsSuffix = (attempts == 1) ? ' attempt' : ' attempts';
        return roundedScore + ' (' + attempts + attemptsSuffix + ')';
      }
    }

    // Adds data to the displayed table.
    function populateTable(table, answerDict) {
      var rowKeys = getSortedKeys(answerDict);

      for (var rowIndex = 0; rowIndex < rowKeys.length; rowIndex++) {
        // The row key is the question identifier, e.g. 'u.1.l.1.b.2'.
        var rowKey = rowKeys[rowIndex];
        var answerInfo = answerDict[rowKey];

        table.setCell(rowIndex, 0, answerInfo['label']);
        table.setCell(
          rowIndex, 1,
          '<a href="' + answerInfo['location'] +'">view</a>');

        var scoreLabel = getScoreLabel(
            answerInfo['score'], answerInfo['num_attempts']);
        table.setCell(rowIndex, 2, scoreLabel);

        for (var i = 0; i < answerInfo['answer_counts'].length; i++) {
          table.setCell(rowIndex, i + 3, answerInfo['answer_counts'][i]);
        }
      }
    }

    function drawTable(divId, sourceDict) {
      // Create and populate the data table.
      var table = new google.visualization.DataTable();
      table.addColumn('string', 'Question Identifier');
      table.addColumn('string', 'Link')
      table.addColumn('string', 'Average Score');

      var maxDataColumns = getMaxAnswerCount(sourceDict);
      for (var i = 0; i < maxDataColumns; i++) {
        table.addColumn('number', 'Choice ' + (i + 1));
      }

      var numRows = getSizeOfObject(sourceDict);
      table.addRows(numRows);
      populateTable(table, sourceDict);

      new google.visualization.Table(
        document.getElementById(divId)
      ).draw(
        table, {
          allowHtml: true,
          sortColumn: 0,  // Force sort on Question Identifier.
          title: 'Answer distribution per question'
        }
      );
    }

    function drawAllTables() {
      drawTable('questionStatisticsTable', answerCountsDict);
      drawTable('assessmentStatisticsTable', answerCountsAssessmentDict);
    }
  </script>

  <h3>Statistics for multiple-choice questions</h3>

  <h4>Questions in lessons</h4>
  <div id="questionStatisticsTable" class="table-container"></div>

  <h4>Questions in assessments</h4>
  <div id="assessmentStatisticsTable" class="table-container"></div>
{% endif %}

{% if errors %}
  <h3>Multiple-Choice Question Statistics -- Errors</h3>
  <ul>
    {% for error in errors %}
      <li>{{ error }}</li>
    {% endfor %}
  </ul>
{% endif %}

{{ update_message }}

<br><br>
